<template>
  <div class="warp">
    <div class="footer">
      <!-- {{items.length}} -->
      <ul>
        <router-link to="/phone">
          <li><van-icon class-prefix="icon" size="25" name="zixun" />咨询</li>
        </router-link>
        <router-link to="/user">
          <li><van-icon class-prefix="icon" size="25" name="wd" />我的</li>
        </router-link>
        <router-link to="/cart">
          <li class="gowuche">
            <van-icon class-prefix="icon" size="25" name="gouwuchekong" />购物车</li>
        </router-link>
        <div class="num">{{ items.length }}</div>
        <router-link to="/cate">
        <li><i style="font-size: 25px" class="icon icon-more-copy"></i>分类</li>
        </router-link>
        <router-link to="/home">
        <li><i style="font-size: 25px" class="icon icon-shouye"></i>首页</li>
        </router-link
        >
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Footer',
  // computed计算属性
  /*
  json的常规用途是同web服务器进行数据传输
  在从web服务器接收数据的时候，数据永远都是字符串
  通过json.parse()解析数据，这些数据会成为JavaScript对象
  */
  computed: {
    // JSON.stringify() 方法用于将 JavaScript 值（数组对象）转换为 JSON 字符串。
    ...mapState({
      items: (state) => JSON.parse(JSON.stringify(state.cart.items))
    })
    /*
    JSON.stringify(value[, replacer[, space]])
    value:必需， 要转换的 JavaScript 值（通常为对象或数组）。
    replacer:可选。用于转换结果的函数或数组。
    如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。
    使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
    如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
    当 value 参数也为数组时，将忽略 replacer 数组。
    space:可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，
    如果 space 大于 10，则文本缩进 10 个空格。space 有可以使用非数字，如：\t。
    */
  }
}
</script>

<style lang="scss" scoped>
ul {
  width: 100%;
}
/deep/ ul li {
  text-align: center;
  width: 19.9%;
  float: right;
  height: 2.5rem;
  list-style: none;
  border-right: 0.1px pink solid;
  border-top: 0.1px pink solid;
  font-size: 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
}
ul li i {
  display: block;
  color: red;
}
a {
  color: #7d7d7d;
}
.num {
  width: 20px;
  height: 20px;
  background: red;
  color: yellow;
  position: absolute;
  text-align: center;
  border-radius: 250px;
  top: 0px;
  left: 55%;
}
.gowuche {
  position: relative;
}
</style>
